
<template>
  <!-- 互动交流 -->
  <div class="t4_content" style="background: #f7f8fa">
    <div class="t4_banner">
      <div class="t4_w">
        <div class="t4_bannerBOX">
          <el-input
            v-model="searchInfo"
            type="text"
            name="keywords"
            id="keywords"
            placeholder="请输入资源名称"
            clearable
            @keyup.enter.native="clearText"
          >
            <el-button @click="clearText" slot="append" icon="el-icon-search"
              >搜索</el-button
            >
          </el-input>
          <ul class="list_Ul">
            <li v-for="(item, index) in hotWordList" :key="index">
              <a @click="hotClick(item)">{{ item }}</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="t4_w" style="position: relative">
      <!-- 面包屑 -->
      <div class="t4_local">
        <span class="local-tag"
          ><img src="@/assets/images/sub_ts.png" alt=""
        /></span>
        <a href="/">首页</a> &gt;<span style="color: #6666">供需需求</span>
      </div>
      <!-- 内容 -->
      <div class="hotspotDataBox">
        <div class="hotspotData_left">
          <div class="hotspotData_item">
            <span>供需需求</span>
          </div>
          <div
            class="hotspotData_items"
            v-for="(item, index) in tabs"
            :key="index"
            @click="add(item, index)"
            :tabs="tabs.name"
            :style="{
              backgroundColor: currentIndex === index ? '#215583' : '#072947',
            }"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="hotspotData_rigth">
          <dataRequirements v-if="activeTabIndex == 0" />
          <xqApplications v-if="activeTabIndex == 1" />
          <spxqApplications v-if="activeTabIndex == 2" />
          <MyApproval v-if="activeTabIndex == 5" />
          <DataResponsibility v-if="activeTabIndex ==7"/>
          <DataResponsibilityList v-if="activeTabIndex == 4" />
         <SupervisorList v-if="activeTabIndex == 3" key="all" type="all"/>
         <SupervisorList v-if="activeTabIndex == 6" key="self" type="self"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getIndex, topFive, issjj } from "../../utils/httpUtils";
import dataRequirements from "./components/dataRequirements";
import xqApplications from "../interactiveCommunication/components/xqApplications";
import spxqApplications from "../interactiveCommunication/components/spxqApplications";
import DataResponsibility from "../interactiveCommunication/components/DataResponsibility";
import MyApproval from "../interactiveCommunication/components/MyApproval";
import DataResponsibilityList from "./components/DataResponsibilityList.vue";
import SupervisorList from "./components/SupervisorList.vue"; // 我的督办
export default {
  components: {
    DataResponsibilityList,
    dataRequirements,
    xqApplications,
    spxqApplications,
    SupervisorList,
    MyApproval,
    DataResponsibility
  },
  data() {
    return {
      currentIndex: 0,
      searchInfo: "",
      hotWordList: [],
      tabs: [
        { name: "数据需求", index: 0 },
        { name: "需求列表", index: 1 },
        // { name: "需求列表", index: 1 },
        // { name: "内容建议", index: 2 },
        // { name: "问题反馈", index: 3 },
        // { name: "纠错列表", index: 4 },
        // { name: "咨询提问", index: 5 },
        // { name: "常见问题", index: 6 },
        // { name: "举报入口", index: 7 },
        // { name: "权益保护", index: 8 },
        // { name: "申请公示", index: 9 },
      ],
      activeTabIndex: 0,
      newestList: [],
      hotList: [],
      // 数据资源总数
      dataNum: 0,
      // 服务资源总数
      serveNum: 0,
      // 共享机构
      institution: 0,
      // 交换数据
      exchangeNum: 0,
      listTab: [{ name: "全部" }, { name: "政务应用" }, { name: "社会应用" }],
      listTab1: [
        { name: "全部" },
        { name: "移动应用" },
        { name: "分析报告" },
        { name: "小程序" },
        { name: "创新方法" },
        { name: "可视化应用" },
      ],
      indexName: "全部",
      indexName1: "全部",
      input3: "",
      sortOrder: "desc", // 默认排序顺序为降序
      selectedOption: null, // 记录当前选中的排序选项
    };
  },
  mounted() {
    this.getList();
    this.getHotWord();
    this.getissjj()
  },
  methods: {
    getissjj(){
      issjj().then(res=>{
        console.log(res,'是否数据局用户')
        if (res.msg === '1') {
          this.tabs.push({ name: "审批列表", index: 2 });
          this.tabs.push({ name: "督办列表", index: 3 });
          this.tabs.push({ name: "数据责任列表", index: 4 });
        } else if (res.msg === '0') {
          this.tabs.push({ name: "我的审批", index: 5 });
          this.tabs.push({ name: "我的督办", index: 6 });
          this.tabs.push({ name: "本部门数据责任", index: 7 });
        }
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    toggleSortOrder(option) {
      // 切换排序顺序
      this.sortOrder = this.sortOrder === "asc" ? "desc" : "asc";
      // 记录当前选中的排序选项
      this.selectedOption = option;
    },
    choosePro(val) {
      this.indexName = val ? val.name : "";
    },
    choosePro1(val) {
      this.indexName1 = val ? val.name : "";
    },
    clearText(event) {
      event.stopPropagation();
      this.searchInfo = "";
    },

    search() {
      this.$router.push({
        path: "/seekResult",
        query: { searchVal: this.searchInfo },
      });
    },
    add(item, index) {
      this.currentIndex = index;
      console.log(item);
      this.activeTabIndex = item.index;
    },
    getList() {
      getIndex().then((res) => {
        console.log(res, "热点数据最新数据");
        if (res.msg === "success" && res.data) {
          this.newestList = res.data.newest;
          this.hotList = res.data.hot;
          this.dataNum = res.data.dataCount ? res.data.dataCount : 0;
          this.serveNum = res.data.serverCount ? res.data.serverCount : 0;
          this.institution = res.data.institution ? res.data.institution : 0;
          this.exchangeNum = res.data.exchangeNum ? res.data.exchangeNum : 0;
        }
      });
    },
    async getHotWord() {
      // 热门关键词
      const { data: res } = await topFive();
      if (res) {
        this.hotWordList = res;
      }
    },
    hotClick(val) {
      this.searchInfo = val;
      this.$router.push({
        path: "/seekResult",
        query: { searchVal: val },
      });
    },
  },
};
</script>

<style scoped>
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hotspotDataBox {
  padding-bottom: 25px;
  display: flex;
  justify-content: space-between;
  min-height: 800px;
}
.hotspotDataBox .hotspotData_left {
  width: 20%;
  background-color: #072947;
  overflow: auto;
}
.hotspotDataBox .hotspotData_left .hotspotData_item {
  height: 65px;
  line-height: 65px;
  background: #198ef8;
  text-align: center;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  line-height: 65px;
}
.hotspotDataBox .hotspotData_left .hotspotData_items {
  height: 57px;
  line-height: 57px;
  text-align: center;
  font-size: 15px;
  border-bottom: 1px #39546c solid;
  color: white;
  cursor: pointer;
}
.hotspotDataBox .hotspotData_left::-webkit-scrollbar {
  width: 6px;
  /* 设置滚动条宽度 */
}

.hotspotDataBox .hotspotData_left::-webkit-scrollbar-thumb {
  background-color: #d5d5d5;
  /* 设置滑块颜色 */
  border-radius: 5px;
  /* 设置滑块边框圆角 */
}

.hotspotDataBox .hotspotData_left::-webkit-scrollbar-track {
  background-color: #edeef0;
  /* 设置轨道颜色 */
}
.hotspotDataBox .hotspotData_rigth {
  width: 77%;
  padding: 20px;
  background-color: #fff;
  border: 1px #edeef0 solid;
  /*height: 560px;*/
}
.hotspotDataBox .hotspotData_rigth .lists-box {
  display: flex;
  justify-content: space-between;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #ededed;
}
.hotspotDataBox .hotspotData_rigth .lists-box .list_title {
  font-size: 18px;
  border-bottom: 2px solid #149bff;
}
.hotspotDataBox .hotspotData_rigth .lists-box .list_title span {
  color: #149bff;
}
.hotspotDataBox .hotspotData_rigth .lists-box .list_jn {
  width: 108px;
  height: 26px;
  line-height: 26px;
  text-align: center;
  font-size: 14px;
  background: #149bff;
  border-radius: 15px;
  margin-top: 13px;
  color: #fff;
}
.hotspotDataBox .hotspotData_rigth .lists_item {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #ededed;
  display: flex;
}
.hotspotDataBox .hotspotData_rigth .lists_item .list_sp {
  color: #4a8ef9;
  font-size: 14px;
}
.hotspotDataBox .hotspotData_rigth .lists_item .lists_ul {
  display: flex;
}
.hotspotDataBox .hotspotData_rigth .lists_item .lists_ul .lists_li {
  color: black;
  margin: 12px 10px 0 0;
  padding: 0 15px;
  height: 26px;
  line-height: 26px;
  border-radius: 13px;
  cursor: pointer;
  font-size: 15px;
}
.hotspotDataBox .hotspotData_rigth .lists_item .lists_ul .proAct {
  background-color: #218fff;
  color: #fff;
}
.hotspotDataBox .hotspotData_rigth .lists_item .lists_ul .input-with-select {
  width: 330px;
}
.hotspotDataBox .hotspotData_rigth .lists_item .lists_ul .lists_sjx {
  margin: 0 10px;
  cursor: pointer;
}
.hotspotDataBox .hotspotData_rigth .li_item {
  height: 220px;
  background: rgb(249, 249, 249);
  display: flex;
  margin: 20px 0;
}
.hotspotDataBox .hotspotData_rigth .li_item .imageBox {
  width: 15%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hotspotDataBox .hotspotData_rigth .li_item .imageBox img {
  width: 72px;
  height: 72px;
}
.hotspotDataBox .hotspotData_rigth .li_item .tex_item {
  width: 85%;
  height: 100%;
  padding: 20px;
}
.hotspotDataBox .hotspotData_rigth .li_item .tex_item .tex_top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hotspotDataBox .hotspotData_rigth .li_item .tex_item .tex_top .tex_bt {
  font-size: 18px;
  color: #333;
}
.hotspotDataBox .hotspotData_rigth .li_item .tex_item .tex_top .text_fs {
  font-size: 15px;
}
  .hotspotDataBox .hotspotData_rigth .li_item .tex_item .tex_top .text_fs .fs {
    margin-right: 10px;
  }

.hotspotDataBox .hotspotData_rigth .li_item .tex_item .tex_fwb {
  font-size: 14px;
  color: #666;
  padding: 10px 0;
}
.hotspotDataBox .hotspotData_rigth .li_item .tex_item .tex_bot {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  margin-top: 10px;
}
.hotspotDataBox .hotspotData_rigth .li_item .tex_item .tex_bot .tex_botItem {
  text-align: center;
}
.hotspotDataBox .hotspotData_rigth .li_item .tex_item .tex_bot .tex_botItem .ftcolor {
  color: #0083ff;
}

.hotspotDataBox .hotspotData_rigth .li_item .tex_item .tp_item {
  display: flex;
  justify-content: flex-end; /* 将内容向右对齐 */
  align-items: center; /* 垂直居中 */
  font-size: 15px;
  margin-top: 10px;
}
.hotspotDataBox .hotspotData_rigth .li_item .tex_item .tp_item .tp_xz {
  margin-right: 20px;
  text-align: center;
}

.t4_banner {
  position: relative;
}
.t4_banner .t4_bannerBOX {
  width: 90%;
  margin: 0 auto;
}
.t4_banner .t4_bannerBOX .list_Ul {
  cursor: pointer;
  display: flex;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 40px;
  height: 10px;
  font-size: 14px;
}
.t4_banner .t4_bannerBOX .list_Ul li {
  margin-left: 10px;
  color: #5f5f5f;
}
.t4_banner .t4_bannerBOX .list_Ul a:hover {
  background: rgba(255, 255, 255, 0.1);
}

/deep/ .t4_banner .el-input-group--append .el-input__inner {
  height: 50px;
  line-height: 50px;
  background: #fff;
  border: 1px solid #fff;
  color: rgb(99, 99, 99);
  text-indent: 15px;
}
/deep/ .t4_banner .el-input-group__append {
  background-color: #198ef8;
  color: #fff;
  border: none;
}
</style>


